<!-- 电梯分布统计 -->
<template>
	<div class="LiftBox">
		<div ref='echartsPie' class="pie">

		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.Pieecharts()
		},
		data() {
			return {
				allCount:100
			}
		},
		methods: {
			Pieecharts() {
				let dom = this.$refs.echartsPie
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					title: {
						text: '电梯分类'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						show: true,
						orient: 'vertical',
						x: 'right',
						data: ['自动扶梯', '电梯', '杂物电梯', '消防员电梯', '防爆电梯']
					},
					graphic: {
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							// text: '维保单位\n' + '100', //使用“+”可以使每行文字居中
							textAlign: 'center',
							font: 'italic bolder 16px cursive',
							fill: '#000',
							width: 30,
							height: 30
						}
					}, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							normal: {
								label: {
									show: true,
									textStyle: {
										color: '#3c4858',
										fontSize: "13"
									},
									formatter:"{b}: ({d}%)"
								}, //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
								labelLine: {
									show: true,
									lineStyle: {
										color: '#3c4858',
										length:20,
										length2:20,
									}
								} //线条颜色
							}, //基本样式
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)', //鼠标放在区域边框颜色
								// textColor: '#000'
							} //鼠标放在各个区域的样式
						},
						data: [{
								value: 20,
								name: '自动扶梯',
							},
							{
								value: 30,
								name: '电梯'
							},
							{
								value: 10,
								name: '杂物电梯'
							},
							{
								value: 10,
								name: '消防员电梯'
							},
							{
								value: 30,
								name: '防爆电梯'
							},
							{
								value: 0,
								name: '总数统计',
								tooltip: {
									show: false
								},
								labelLine: {
									show: false,
								},
								label: {
									normal: {
										position: 'center',
										textStyle: {
											fontSize: 20,
											color: '#303133',
										},
										formatter: () => {
											return this.allCount
										}
									}
								}
							}
						]
					}]
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.LiftBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pie {
		width: 85%;
		height: 85%;
	}
</style>
